<template>
	<div>
		<el-form :inline="true">
			<el-form-item label="酒店ID">
				<el-input v-model="searchMap.hotel_id" placeholder="" />
			</el-form-item>
			<el-button type="primary" @click="fetchData()">查询</el-button>
			<el-button type="primary" @click="handleEdit('')">新增</el-button>
		</el-form>

		<!--表格组件-->
		<el-table :data="list" style="width: 100%">
			<!--prop 后端返回的json数据的字段名-->
			<el-table-column prop="hotel_id" label="酒店ID">
			</el-table-column>
			<el-table-column prop="hotel_name" label="酒店名">
			</el-table-column>
			<el-table-column prop="hotel_star" label="酒店星级">
			</el-table-column>
			<el-table-column prop="addx" label="经度">
			</el-table-column>
			<el-table-column prop="addy" label="纬度">
			</el-table-column>
			<el-table-column prop="country" label="国家">
			</el-table-column>
			<el-table-column prop="province" label="省份">
			</el-table-column>
			<el-table-column prop="city" label="城市">
			</el-table-column>
			<el-table-column prop="region" label="地区">
			</el-table-column>
			<el-table-column prop="addr" label="结构化地址">
			</el-table-column>
			<el-table-column prop="is_parking" label="能否停车（0否1是）">
			</el-table-column>
			<el-table-column prop="telphone" label="电话">
			</el-table-column>
			<el-table-column prop="description" label="酒店描述">
			</el-table-column>
			<el-table-column prop="area" label="酒店面积">
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="100">
				<template slot-scope="scope">
					<el-button @click="handleEdit(scope.row.hotel_id)" type="text" size="small">修改</el-button>
					<el-button @click="handleDelete(scope.row.hotel_id)" type="text" size="small">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--分页-->
		<el-pagination @size-change="sizeData" @current-change="pageData" :page-sizes="[5, 10, 20, 30, 100]" :page-size="10"
			layout="total, sizes, prev, pager, next, jumper" :total="count">
		</el-pagination>
		<el-dialog title="编辑" :visible.sync="dialogFormVisible">
			<el-form label-width="80px">
				<el-form-item label="酒店名">
					<el-input v-model="pojo.hotel_name" />
				</el-form-item>
				<el-form-item label="酒店星级">
					<el-input v-model="pojo.hotel_star" />
				</el-form-item>
				<el-form-item label="经度">
					<el-input v-model="pojo.addx" />
				</el-form-item>
				<el-form-item label="纬度">
					<el-input v-model="pojo.addy" />
				</el-form-item>
				<el-form-item label="国家">
					<el-input v-model="pojo.country" />
				</el-form-item>
				<el-form-item label="省份">
					<el-input v-model="pojo.province" />
				</el-form-item>
				<el-form-item label="城市">
					<el-input v-model="pojo.city" />
				</el-form-item>
				<el-form-item label="地区">
					<el-input v-model="pojo.region" />
				</el-form-item>
				<el-form-item label="结构化地址">
					<el-input v-model="pojo.addr" />
				</el-form-item>
				<el-form-item label="能否停车（0否1是）">
					<el-input v-model="pojo.is_parking" />
				</el-form-item>
				<el-form-item label="电话">
					<el-input v-model="pojo.telphone" />
				</el-form-item>
				<el-form-item label="酒店描述">
					<el-input v-model="pojo.description" />
				</el-form-item>
				<el-form-item label="酒店面积">
					<el-input v-model="pojo.area" />
				</el-form-item>
				<el-button type="primary" @click="handleSave()">保存</el-button>
				<el-button @click="dialogFormVisible = false">关闭</el-button>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
import HotelApi from "@/api/apiLiu/Hotel_request"
export default {
	data() {
		return {
			list: [],
			searchMap: {
				hotel_id: null,
				hotel_name: null,
				hotel_star: null,
				addx: null,
				addy: null,
				country: null,
				province: null,
				city: null,
				region: null,
				addr: null,
				is_parking: null,
				telphone: null,
				description: null,
				area: null,
				pageNum: 1,
				pageSize: 7,
			},
			count: 20,
			pojo: {
				hotel_id: null,
				hotel_name: null,
				hotel_star: null,
				addx: null,
				addy: null,
				country: null,
				province: null,
				city: null,
				region: null,
				addr: null,
				is_parking: null,
				telphone: null,
				description: null,
				area: null,

			},
			dialogFormVisible: false,
			dialogFormVisibleTwo: false,
			id: '',
		}
	},
	created() {
		//在创建vue实例后触发初始化钩子函数
		this.fetchData();
	},
	methods: {
		fetchData() {
			//编写一个方法请求后端的接口，把返回的数据赋值list
			HotelApi.selectList(this.searchMap).then(response => {
				//  //把返回的结果赋值模型
				this.list = response.data.data
				this.count = response.data.count
			})
		},
		//当分页大小产生变化的时候调用该方法
		sizeData(size) {
			this.searchMap.pageSize = size
			this.fetchData()
		},
		pageData(page) {
			this.searchMap.pageNum = page
			this.fetchData()
		},
		//新增和修改使用同一个函数打开弹窗，区别是新增没有id
		handleEdit(id) {
			this.id = id
			//打开弹窗
			this.dialogFormVisible = true
			if (id !== '') {
				//根据id查询数据绑定到模型上面
				HotelApi.selectByHotel_id(id).then(reponse => {
					this.pojo = reponse.data.data;
				})
			} else {
				this.pojo = {
					hotel_id: null,
					hotel_name: null,
					hotel_star: null,
					addx: null,
					addy: null,
					country: null,
					province: null,
					city: null,
					region: null,
					addr: null,
					is_parking: null,
					telphone: null,
					description: null,
					area: null,
				} //清空数据
			}
		},
		//新增和修改保存数据的方法
		handleSave() {
			if (this.id === null || this.id === '') {
				HotelApi.insert(this.pojo).then(reponse => {
					this.$message({
						message: reponse.data.msg,
						type: 'success'
					})
					//重新加载列表数据
					this.fetchData()
					//关闭弹窗
					this.dialogFormVisible = false
				})
			} else {
				HotelApi.insertOrUpdate(this.pojo).then(reponse => {
					//新增或者修改成功
					this.$message({
						message: reponse.data.msg,
						type: 'success'
					})
					//重新加载列表数据
					this.fetchData()
					//关闭弹窗
					this.dialogFormVisible = false

				})
			}
		},
		handleDelete(id) {
			this.$confirm('您确定要删除吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				HotelApi.deleteByHotel_id(id).then(reponse => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
					this.fetchData()
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		}
	}
}

</script>
<style>

</style>